<template>
	<a-row :gutter="10">
		<a-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
			<db-table-list
				ref="dbTableListRef"
				@selectTableName="selectTableName"
			/>
		</a-col>
		<a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
			<db-column-list
				ref="dbColumnListRef"
				:dbsId="shareData.dbsId"
				:tableName="shareData.tableName"
				:tableRemark="shareData.tableRemark"
				@selectColumnName="selectColumnName"
			/>
		</a-col>
	</a-row>
</template>
<script setup name="dmIndex">
	import DbTableList from './dbTable/index.vue'
	import DbColumnList from './dbColumn/index.vue'

	const dbTableListRef = ref()
	const dbColumnListRef = ref()

	// 共享数据
	const shareData = ref({
		dbsId: '',
		dbsName: '',
		tableName: '',
		columnName: '',
		tableRemark: ''
	})
	// 数据库表名变化
	const selectTableName = (tableName, dbsId, tableRemark) => {
		shareData.value.dbsId = dbsId
		shareData.value.tableName = tableName
		shareData.value.tableRemark = tableRemark
		nextTick(() => {
			dbColumnListRef.value.getDbColumnList()
		})
	}
	// 数据库字段变化
	const selectColumnName = (val) => {
		shareData.value.columnName = val
	}
</script>
<style scoped>
	:deep(.ant-card-body) {
		padding: 10px !important;
	}
</style>
